<template>
  <div class="containerCSS">
    <div class="app-container">
      <div class="app-container-title">待办事项</div>
      <div class="tabCss">
        <div class="tabItemCss"
        :class=" tabActiveId === item.id ? 'tabItemCssActive' : ''"
        v-for="(item, index) in tabs" :key="index"
        @click="tabItemClickBtn(item)">
          {{ item.name }}
        </div>
      </div>
      <CleanLogRemindTable
      v-show="tabActiveId === 0"
      ref="cleanLogRemindTableRef"
      :tabActiveId="tabActiveId"
      :cmpFrom="cmpFrom"
      />
      <ReportRemindTable
      ref="reportRemindTableRef"
      v-show="tabActiveId === 1"
      :tabActiveId="tabActiveId"
      :cmpFrom="cmpFrom"
      />
      <CertExpireRemindTable
      ref="certExpireRemindTableRef"
      v-show="tabActiveId === 2"
      :tabActiveId="tabActiveId"
      :cmpFrom="cmpFrom"
      />
    </div>
  </div>
</template>

<script>
import CleanLogRemindTable from './components/cleanLogRemindTable.vue'
import ReportRemindTable from './components/reportRemindTable.vue'
import CertExpireRemindTable from './components/certExpireRemindTable.vue'
export default {
  props:{
    cmpFrom:{
      type: String,
      default:()=> 'second'
    },
  },
  components:{
    CleanLogRemindTable, ReportRemindTable, CertExpireRemindTable,
   },
  data(){
    return{
      tabs:[{id:0,name:'清洁记录提醒'},{id:1,name:'检测报告提醒'},{id:2,name:'健康证提醒'},],
      tabActiveId:null,
    }
  },
  mounted(){
    if( sessionStorage.getItem('tabActiveId') != null){
      const id = Number(sessionStorage.getItem('tabActiveId'))
      this.tabItemClickBtn({id: id})
      sessionStorage.removeItem('tabActiveId')
    }else{
      const id = this.tabs[0].id
      this.tabItemClickBtn({id: id})
    }
  },
  methods:{
    tabItemClickBtn(item){
      this.tabActiveId = item.id
      const idRefMap = {
        0:'cleanLogRemindTableRef',1:'reportRemindTableRef',2:'certExpireRemindTableRef'
      }
      this.$refs[idRefMap[item.id]].resetQuery()
    },
  },
}
</script>

<style scoped lang="scss">
.containerCSS{
  background-color: #fff;
  height: calc( 100vh - 108px);
  border-radius: 10px;
  .app-container{

    .app-container-title{
      font-size: 16px;
      color: #484848;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      &:before{
        content:'';
        display: block;
        width: 4px;
        height: 12px;
        background-color: #1684FC;
        border-radius: 6px;
        margin-right: 6px;
      }
    }
    .tabCss{
      user-select: none;
      display: flex;
      flex-wrap: wrap;
      .tabItemCss{
        color: #1684FC;
        padding: 8px 12px;
        cursor: pointer;
        border: 1px solid #1684FC;
        margin-bottom: -1px;
        &:not(:last-child){
          margin-right: -1px;
        }
      }
      .tabItemCssActive{
        background-color: #1684FC;
        color: #fff;
      }
    }
  }
}
</style>